<template>
  <div>
    <div class="left-box custom-height">
      <introduce />
      <videoTree />
    </div>
    <div class="right-box custom-height">
      <industry />
      <person />
      <outputPanel />
    </div>
    <videoPanel />
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
// 乡村概览
import introduce from "./componets/introduce.vue";
import person from "./componets/person.vue";
import outputPanel from "./componets/output.vue";
import industry from "./componets/industry.vue";
import videoTree from "./componets/videoTree.vue";
import videoPanel from "./componets/videoPanel.vue";
import * as area from "@/layouts/components/area.js";

import { overviewStore } from "@/stores/overview";
const store = overviewStore();
onMounted(() => {
  area.init((ent) => {
    const info = ent["社区概况"];
    store.overviewData = info;
    store.overviewType = ent.O_Name;
  });
});

onUnmounted(() => {
  area.destroy();
});
</script>

<style lang="scss" scoped></style>
